<template>
	<div id="outDiv" :class="isFocus ? 'getFocus' : ''">
		<group class="inputGroup" :title="groupTitle">
			<div class="xInput">
				<div class="flex-h">
					<toast :v-model="errMsg == '' ? false :showPositionValue" type="text" :time="2000" width="50%" is-show-mask :text="errMsg">{{errMsg}}</toast>
					<div class="flex-input">
						<img :src="pathSrc" alt="">
						<input style="width: 4rem;" 
							v-on:focus="focusOn" 
							v-on:blur="blurAdjust" 
							:class="['flex1', type == 'yzm' ? 'yzmInput' : '']" 
							:type="type==='num' || type==='yzm'?'number':txtType"
						 	ref="input" 
							:placeholder="plvalue" 
							:value="value" 
							@input="$emit('getVal', $event.target.value)"
						>

						<div class="boxwes" v-if="type=='pwd'" @click="tabImg">

							<img class="imgIcon" src="~/static/images/password_icon_eye_d.png" v-if="ssr" />
							<img class="imgIcon" src="~/static/images/password_icon_eye_s.png" v-else />

						</div>
						<div v-if="type=='yzm'" class="yzmGroup">
							<button :class="['yzm', yzmtrue ? '':'yzmactive']" :disabled="!yzmtrue" v-on:click="send">{{ yzmMsg }}</button>
						</div>
					</div>
				</div>
			</div>
		</group>
	</div>
</template>

<script>
	import {
		Toast,
		Group
	} from 'vux'
	export default {
		props: {
			errMsg: String,
			pathSrc: String,
			plvalue: String,
			value: String,
			showXx: Boolean,
			type: String,
			groupTitle: String,
			yzmMsg:String,
			yzmtrue: Boolean,
		},
		model: {
			prop: 'value',
			event: 'getVal'
		},
		components: {
			Toast,
			Group
		},
		data() {
			return {
				ssr: true,
				txtType: 'password',
				showPositionValue: false,
				isFocus: false,
			};
		},
		mounted: function() {},
		methods: {
			tabImg() {
				this.ssr = !this.ssr
				if (this.ssr === true) {
					this.txtType = 'password'
				} else {
					this.txtType = 'text'
				}
			},
			clear1() {
				this.$emit("clears")
			},
			blurAdjust(e) {
				// 文本框失去焦点
				this.isFocus = false;
				setTimeout(() => {
					if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
						return
					}

					let result = 'pc';
					if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
						result = 'ios'
					} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
						result = 'android'
					}

					if (result = 'ios') {
						document.activeElement.scrollIntoViewIfNeeded(true);
					}
				}, 40)
			},
			focusOn() {
				// 文本框获取焦点
				this.isFocus = true;
			},
			send() {
				this.$emit("sends")
			},
		}
	};
</script>


<style scoped lang="less">
	@errorColor: #ff210a;

	.getFocus {
		.inputGroup /deep/ .weui-cells__title {
			color: #409EFF;
		}
	}

	.inputGroup /deep/ .weui-cells__title {
		color: #999;
		font-size: 0.28rem;
		margin-bottom: 0;
	}

	.inputGroup /deep/ .weui-cells:before,
	.inputGroup /deep/ .weui-cells:after,
	.inputGroup .xInput {
		border: none;
		height: auto;
	}

	.inputGroup {
		margin-bottom: 0.4rem;
		position: relative;
	}

	.inputGroup /deep/ .flex-h {
		height: auto;
		flex-direction: column !important;
		justify-content: flex-start !important;

		.yzmGroup {
			position: absolute;
			right: 0.1rem;
		}

		.yzm {
			display: inline-block;
			font-size: 0.28rem;
			color: #409EFF;
			width: 2.04rem;
			height: 0.72rem;
			line-height: 0.72rem !important;
			text-align: center;
			background: #F7F7FA;
			border-radius: 0.5rem;
			margin-left: 0.3rem;
			border: none;
			outline: none;
			
		}
		.yzmactive{
			color: #C7C7C7
		}

		.flex1 {
			border-bottom: 2px solid #EEE;
			height: 1.04rem;
			border-radius: 0;
			box-sizing: border-box;
		}

		.flex1:focus {
			border-bottom-color: #409EFF;
		}
	}

	.xInput {
		width: 100%;
		height: 1rem;
		border-bottom: 5px solid #EEE;
		font-size: 0.3rem;
		padding-right: 0.5rem;
		padding-left: 0;
		box-sizing: border-box;
		
		.boxwes {
			width: 1rem;
			height: 0.5rem;
			overflow: hidden;
			text-align: right;
			padding-top: 0.1rem;
			box-sizing: border-box;
			position: absolute;
			right: 0.2rem;
		}

		.noShow {
			display: none;
		}

		.toShow {
			display: inline-block;
		}

		.errorSpan {
			padding-left: 0.5rem;
			box-sizing: border-box;
			height: 0.4rem;
			text-align: left;
			width: 100%;


			line-height: 0.4rem;

			b {
				font-size: 0.22rem;
				color: @errorColor;
			}
		}

		img {
			width: 0.3rem;
			height: auto;
		}

		input {
			width: 100%;
			padding-left: 0;
			box-sizing: border-box;
			height: 0.56rem;
			outline: none;
			border: none;
			line-height: 0.56rem;
			font-size: 0.3rem;
			color: #222;
			padding-right: 0.8rem;
			box-sizing: border-box;
			
		}

		.yzmInput {
			padding-right: 3rem;
		}
	}

	.xColor {
		border-bottom: 2px solid @errorColor  !important;
	}

	.flex-input {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: center;
		position: relative;

	}

	.yzm {
		font-size: 0.26rem;
		line-height: 0.6rem;
	}

	.send {
		color: #64ab33 !important;
	}
</style>
